<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<link rel="stylesheet" href="js/bootstrap-3.3.7-dist/css/bootstrap.min.css">

		<link rel="stylesheet" href="js/bootstarp-table-1.11.1/bootstrap-table.min.css">

		<script src="js/jquery-3.3.1.min.js"></script>

		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

		<script src="js/bootstarp-table-1.11.1/bootstrap-table.min.js"></script>

		<script src="js/bootstarp-table-1.11.1/bootstrap-table-zh-CN.min.js"></script>

	</head>

	<body style="margin: 30px;">
		<div class="container">
			<!--综合查询表单-->
			<form class="form-inline" role="form">
				<div class="form-group">
					<label>姓名</label> <input type="text" class="form-control" name="keyword" id="keyword" placeholder="请输入IP名称">
				</div>
				<div class="form-group">
					<label for="exampleInputEmail2">授权类型</label>
					<select class="form-control" id="type" name="type">
						<option value="-1">-请选择-</option>
						<option value="1">创意家居</option>
						<option value="2">生活百货</option>
						<option value="3">时尚配饰</option>
						<option value="4">数码配件</option>
						<option value="5">儿童玩具</option>
						<option value="6">童装童鞋</option>
						<option value="7">成人鞋服</option>
						<option value="8">IP授权</option>
						<option value="9">世界之旅</option>
					</select>
				</div>
				<div class="form-group">
					<button type="button" class="btn btn-primary" id="sub2">综合查询</button>
				</div>
			</form>

			<!-- Button trigger modal -->
			<button class="btn btn-primary" name="insert" id="insert">添加</button>

			<!--员工表格-->
			<table class="table" id="etable">
			</table>

		</div>
	</body>

</html>

<script type="text/javascript">
	$(function() {

		//综合查询
		$("#sub2").on("click", function() {
			$("#etable").bootstrapTable("refresh");
		});


        //显示所有
		$("#etable").bootstrapTable({
			url : 'findinfo',
			method : 'post', //请求方式（）
			dataType : 'json',
			contentType : "application/x-www-form-urlencoded",
			showExport : true, //是否显示导出按钮
			exportDataType : "all", //basic'导出当前页, 'all'导出全部, 'selected'导出选中项.
			toolbar : '#toolbar', //工具按钮用哪个容器
			undefinedText : "-",//当数据为 undefined 时显示的字符
			striped : true, //是否显示行间隔色
			cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（）
			pagination : true, //是否显示分页（）
			pageSize : 8, //每页显示的记录数
			pageNumber : 1, //当前第几页
			//pageList : [5,10, 15, 20, 25 ], //记录数可选列表
			sortable : false, //是否启用排序
			sortOrder : "asc", //排序方式
			sidePagination : "server", //分页方式：client客户端分页，server服务端分页（）
			search : false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
			strictSearch : true,
			showColumns : true, //是否显示所有的列
			showRefresh : true, //是否显示刷新按钮
			minimumCountColumns : 4, //最少允许的列数
			responseHandler: function (res) {
				/* $("#invite_count").html(res.count);//count  后端返回的非total、rows数据
				$("#invite_month").html(res.month); */
				return{                            //return bootstrap-table能处理的数据格式
					"total":res.data.total,
					"rows":res.data.ipInfos
				}
			},
//clickToSelect: true, //是否启用点击选中行
//height: 600, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
			uniqueId : "id", //每一行的唯一标识，一般为主键列
			showToggle : true, //是否显示详细视图和列表视图的切换按钮
			cardView : false, //是否显示详细视图
			detailView : false, //是否显示父子表
			////查询参数,每次调用是会带上这个参数，可自定义*/
			queryParams: function(params) {
				return {
					keyword: $("#keyword").val(),
					type: $("#type").val(),
					pageNumber: params.limit,
                    currentPage: params.offset
				}
			},
			columns: [{
                field: 'id',
                title: 'ID',
                align: 'center'

            },{
				field: 'ipName',
				title: 'IP名称',
				align: 'center'

			}, {
				field: 'initial',
				title: '首字母',
				align: 'center'
			},{
				field: 'sort',
				title: '排序',
				align: 'center'
			},{
				field: 'type',
				title: '类型',
				align: 'center',
				formatter: function(value, row, index) {
					if(value == "1") {
						return "明星授权";
					}
					if(value == "2") {
						return "品牌授权";
					}
					if(value == "3") {
						return "IP授权";
					}
					return "食品";
				}
			}, {
				field: 'imgUrl',
				title: '图片地址',
                align: 'center',
                formatter: function(value,row,index){
                    var imgUrl=row.imgUrl;
                    if(row.imgUrl==''||row.imgUrl==null){imgUrl="/images/default.jpg";}
                    return '<img src='+imgUrl+' class="img-rounded" style="width:50px;height:50px;" >';
                }
            }, {
				field: 'linkUrl',
				title: '链接地址',
				align: 'center'
			},{
				field: 'describe',
				title: 'IP描述',
				align: 'center'
			}, {
				formatter: function(value,row) {
					return [
						"<a href='updateInfo?id=" +JSON.stringify(row.id)+ "'>"+
						'<i class="glyphicon glyphicon-remove"></i>修改' +
						'</a>',
						/* '<button type="button" class="btn btn-primary btn-xs" id="sub1" onclick="queryEmp(JSON.stringify(row))">修改</button>', */
						'<a href="delInfo?id=' + JSON.stringify(row.id) + '">' +
						'<i class="glyphicon glyphicon-remove"></i>删除' +
						'</a>'
					].join('');
				},
				title: '操作',
				align: 'center'
			}],
		});


		//添加
		
		$("#insert").on("click", function() {
  			window.location.href='toadd';
		});
	});



</script>